<template>
    <transition name="fade">
        <div id="loginPage" v-if="View ==='Register'">
            <div id="Register">
                <p class="topic">登录</p>
                <!--双向数据绑定 不能直接更改父组件的传参-->
                <i class="el-icon-circle-close" @click="$emit('be-closed')" ></i>
                <!--<form onsubmit="return false">-->
                <div id="Msg">
                    <input id="phoneNum" type="tel" maxlength="13" v-model="registerData.PhoneNumbers" placeholder="请输入您的手机号码" @keyup.enter="submitRegister"/><br/>
                    <p>*{{phoneNumNotice}}</p>
                    <input id="telIdWord" type="text" maxlength="4" placeholder="手机验证码" v-model="registerData.Code" @keyup.enter="submitRegister"/>
                    <button @click="getIdCode" >{{getCodeState}}</button>
                    <button @click="submitRegister">登录</button><br/>
                    <a @click="QQlogin">
                        <img src='../assets/img/QQicon.png'>
                        使用QQ登录</a>
                </div>
                <!--</form>-->
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        name: "Register",
        data(){
            return{
                api:this.Global.api,
                getCodeState:'获取验证码',
                phoneNumNotice:'手机号码默认作为登录账户',
                registerData:{
                    PhoneNumbers: '',
                    Code:''
                },
                timeout: 0,
            }
        },
        props:['View'],
        methods:{
            getIdCode(){
                if(this.timeout === 0){
                    this.$axios.post(this.api+'/index.php/index/sendsms',this.$qs.stringify(this.registerData),{headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}).then(
                        res=>{
                            if(res.status >=200 && res.status <300){
                                if(res.data.res === "ok") {
                                    this.timeout= 60;
                                    alert('发送成功，请输入验证码');
                                    let interval = setInterval(()=>{
                                        if(this.timeout === 0) {
                                        this.getCodeState= '获取验证码';
                                        clearInterval(interval);
                                    }else{
                                            this.getCodeState=`重新发送（${this.timeout--}s）`;
                                        }
                                    },1000)
                                }else {
                                    alert('手机验证码获取失败，请重新操作！')
                                }
                            }else {
                                alert(res.status);
                            }
                        }  )
                }else {
                    alert('请勿重复点击')
                }
            },
            submitRegister(){
                this.$axios.post(this.api+'/index.php/index/verifysms',this.$qs.stringify(this.registerData),{headers:{'Content-Type': 'application/x-www-form-urlencoded'}}).then(
                    res=>{
                        if(res.status>=200&&res.status<300){
                            if(res.data.res === 'ok'){
                                document.cookie = 'login_state=true';
                                document.cookie = 'login_token=' + decodeURIComponent(res.data.token);
                                this.$emit('loginState',this.registerData.PhoneNumbers);
                            }else{
                                alert('验证码输入错误');
                            }
                        }
                    }
                )
            },
            QQlogin(){
               window.location.href= this.api+'/index.php/index/qc';
            },
        },
        mounted() {
        },
        computed: {
        },
        watch:{
           registerData:{
                deep:true,
               handler(){
                    let Reg = /^1(3|4|5|7|8)[0-9]{9}$/;
                    if(Reg.test(this.registerData.PhoneNumbers)){
                        this.phoneNumNotice = '手机号码默认作为登录账户，请获取验证码'
                    }else{
                        this.phoneNumNotice = '请输入正确的手机号码'
                    }
               }
            }
        }
    }
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s ease;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
    #loginPage{
        z-index: 10;
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.5);
    }
    #Register{
        position: fixed;
        left: calc((100% - 350px)/2);
        margin-top: 20vh;
        background-color: white;
        width: 350px;
        z-index: 5;
        box-shadow: #515151;
        border-radius: 10px;
    }

    #Register i{
        font-size: 35px;
        position: absolute;
        top: 10px;
        right: 10px;
        color: #ff0a60;
        font-weight: bolder;
    }
    #Register i:hover{
        filter: opacity(90%);
        color: #ff77a3;
        cursor: pointer;
    }
    .topic{
        font-size: xx-large;
        text-align: center;
        margin-top: 10px;
        position: relative;
        top: 5px;
    }
    #Register p{
        width: 100%;
        font-weight: bold;
    }
    #Msg{
        color: #ff0a60;
    }
    #Msg p{
        position: absolute;
        left: 10%;
        top: 115px;
    }
    #Msg input,#Msg button {
        position: relative;
        left: 10%;
        height: 40px;
        margin: 15px 0px;
        width: 80%;
        border-radius: 5px;
        border: 1px solid rgba(0,0,0,0.2);
    }
    #Msg input{
        text-indent: 1em;
    }
    #Msg button{
        background-color: #ff0a60;
        margin: 10px 0px;
        border: none;
        font-size: large;
        color: white;
    }
    #Msg button:nth-child(6){
        margin-bottom: 5px;
    }
    #Msg a{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 8em;
        height: 20px;
        left: calc(50% - 4em);
        margin-bottom: 12px;
        text-decoration: underline;
    }
    #Msg a img{
        display: inline-block;
        width: 15px;
        height: 17px;
    }
    #Msg button:hover{
        filter: opacity(90%);
        cursor: pointer;
    }
    .register{
        font-size: small;
        text-decoration: none;
        margin-bottom: 10px;
        text-align: center;
    }

</style>